<template>
	<view >
		<text @click="showDrawer">筛选</text>
		<uni-drawer ref="showLeft" mode="right">
			<view class="formbox">
				<view class="h5">数据筛选</view>
				<form @submit="formSubmit" @reset="formReset">
					<view class="uni-form-item uni-column">
						<view class="title">行业选择：</view>
						<!-- 	<app-select v-model="type" name="select" placeholder="请选择类型" :dict="plan_type" space>
						</app-select> -->
						<uni-data-picker name="industryCategory" :border="false" :localdata="categoryList"
							popup-title="请选择行业"></uni-data-picker>
					</view>
					<view class="uni-form-item uni-column" v-if="role != 'linkman'">
						<view class="title">所属地区</view>
						<uni-data-picker :border="false" v-model="community" :localdata="queryTreeList"
							:map="{text:'departName',value:'id'}" popup-title="请选择所属地区"></uni-data-picker>
						<input style="display: none;" v-model="community" name="community" />
					</view>
					<view class="uni-form-item uni-column">
						<view class="title">时间筛选(完成时间排查)：</view>
						<view class="leave_cont">
							<view class="example-body">
								<uni-datetime-picker v-model="range" type="daterange" rangeSeparator="至" />
								<input style="display: none;" v-model="checkStartTime" name="checkStartTime" />
								<input style="display: none;" v-model="checkEndTime" name="checkEndTime" />
							</view>
						</view>
					</view>
					<view class="uni-form-item uni-column">
						<view class="title">排查员</view>
						<input class="uni-input" name="checkBy" placeholder="这是一个输入框" />
					</view>
					<view class="uni-form-item uni-column">
						<view class="title">排查状态</view>
						<myRadio type="radio" @change="changeCheckStatus" dictCode="check_status1" :isAll="true">
						</myRadio>
						<input style="display: none;" v-model="checkStatus" name="checkStatus" />
					</view>
					<view class="uni-form-item uni-column">
						<view class="title">督导状态</view>
						<myRadio type="radio" @change="changeSuperviseStatus" dictCode="supervise_status" :isAll="true">
						</myRadio>
						<input style="display: none;" v-model="superviseStatus" name="superviseStatus" />
					</view>
					<view class="uni-form-item uni-column">
						<view class="title">时间筛选(完成督导时间)：</view>
						<view class="leave_cont">
							<uni-datetime-picker v-model="superviseRange" type="daterange" rangeSeparator="至" />
							<input style="display: none;" v-model="superviseStartTime" name="superviseStartTime" />
							<input style="display: none;" v-model="superviseEndTime" name="superviseEndTime" />
						</view>
					</view>
					<view class="uni-form-item uni-column">
						<view class="title">场所状态</view>
						<myRadio type="radio" @change="changeplaceStatus" dictCode="place_status" :isAll="true">
						</myRadio>
						<input style="display: none;" v-model="placeStatus" name="placeStatus" />
					</view>
					<view class="uni-form-item uni-column">
						<view class="title">时间筛选(完成复查时间)：</view>
						<view class="leave_cont">
							<uni-datetime-picker v-model="reviewRange" type="daterange" rangeSeparator="至" />
							<input style="display: none;" v-model="reviewStartTime" name="reviewStartTime" />
							<input style="display: none;" v-model="reviewEndTime" name="reviewEndTime" />
						</view>
					</view>
					<view class="uni-form-item uni-column">
						<view class="title">复查员(请输入全名，不支持模糊搜索)</view>
						<input class="uni-input" name="reviewBy" placeholder="这是一个输入框" />
					</view>
					<!-- 多个复选框-->
					<view class="uni-form-item uni-column">
						<view class="title">预审状态</view>
						<myRadio type="radio" @change="changereviewStatus" dictCode="review_status" :isAll="true">
						</myRadio>
						<input style="display: none;" v-model="reviewStatus" name="reviewStatus" />
					</view>
					<view class="uni-form-item uni-column">
						<view class="title">排序方式</view>
						<myRadio type="radio" @change="changecolumn" dictCode="column" :isAll="true"></myRadio>
						<input style="display: none;" v-model="column" name="column" />
					</view>
					<view class="uni-form-item uni-column">
						<view class="title">正序倒序</view>
						<myRadio type="radio" @change="changeorder" dictCode="order" :isAll="true"></myRadio>
						<input style="display: none;" v-model="order" name="order" />
					</view>
					<view class="text-center padding">
						<!-- <button class="cu-btn lg line-blue margin-right shadow" form-type="reset">重置
						</button> -->
						<button class="cu-btn lg bg-blue shadow" form-type="submit">提交
						</button>
					</view>
				</form>

			</view>
		</uni-drawer>

	</view>
</template>
<script>
	import appSelect from '@/components/my-componets/appSelect.vue'
	import server from '@/api/server.js'
	const plan_type = [{
		text: '日常记录',
		value: '日常记录1'
	}, {
		text: '本周工作',
		value: '本周工作2'
	}, {
		text: '下周计划',
		value: '下周计划3'
	}];

	export default {
		components: {
			appSelect,
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				role:'',
				queryTreeList:[],
				checkStatus: '',
				superviseStatus: '',
				industryCategory: '',
				placeStatus: '',
				// 时间
				checkStartTime: '',
				checkEndTime: '',
				superviseStartTime: '',
				superviseEndTime: '',
				reviewStartTime: '',
				reviewEndTime: '',
				other: '请输入',
				range: ["", ""],
				superviseRange: ["", ""],
				reviewRange: ["", ""],
				community: '',
				reviewStatus: '',
				column: '',
				order: '',
				// 时间
				rangetime: [],
				categoryList: [],
				plan_type,
				type: "0",
				checkedArr: [], //复选框选中的值
			};
		},
		watch: {
			range(newval) {
				this.checkStartTime = this.range[0]
				this.checkEndTime = this.range[1]
			},
			superviseRange(newval) {
				this.superviseStartTime = this.superviseRange[0]
				this.superviseEndTime = this.superviseRange[1]
			},
			reviewRange(newval) {
				this.reviewStartTime = this.reviewRange[0]
				this.reviewEndTime = this.reviewRange[1]
			},
		},
		mounted(){
			this.role = this.$store.getters.role
			console.log(this.role,'0000000000000000000000000000000000000')
			this.getdet();
		},
		methods: {
			showDrawer() {
				this.$refs["showLeft"].open();
				//行业类别
				server.categoryList().then(res => {
					this.$nextTick(function() {
						console.log(res)
						this.categoryList = res.data.result
					});

				})
			},
			closeDrawer() {
				this.$refs["showLeft"].close();
			},
			formSubmit: function(e) {
				 // console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				this.$emit('testShow', e.detail.value)
			},
			formReset: function(e) {
				console.log('清空数据')
			},
			changeCheckStatus(obj) {
				console.log(obj)
				this.checkStatus = obj
			},
			changeSuperviseStatus(obj) {
				this.superviseStatus = obj
			},
			changeplaceStatus(obj) {
				this.placeStatus = obj
			},
			changecommunity(obj) {
				this.community = obj
			},
			changereviewStatus(obj) {
				this.reviewStatus = obj
			},
			changecolumn(obj) {
				this.column = obj
			},
			changeorder(obj) {
				this.order = obj
			},

			// // 选择日期
			// bindDateChange: function(e) {
			// 	this.start_date = e.target.value

			// },
			// bindDateChange2: function(e) {
			// 	this.end_date = e.target.value;
			// 	this.other = this.end_date;
			// },
			// 获取当前时间
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			moveStop(){
				return
			},
			
			getdet() {
				server.queryTreeList().then(res => {
					this.$nextTick(function() {
						console.log(res)
						this.queryTreeList = res.data.result
					});
			
				})
			},
		}
	};
</script>

<style scoped lang="scss">
	/deep/.uni-drawer__content--visible {
		overflow-y: auto;
	}

	.uni-form-item {
		margin-bottom: 20px;

		.title {
			box-sizing: border-box;
			margin-bottom: 10px;
			font-size: 15px;
			position: relative;
			padding-left: 10px;
			font-weight: bold;
			color: #333333;
		}

		.title::before {
			width: 5px;
			content: '';
			height: 21px;
			background-color: #00a4ff;
			display: inline-block;
			border-radius: 7px;
			position: absolute;
			top: 0;
			left: 0;
		}
	}

	/deep/uni-checkbox.checked .uni-checkbox-input {
		background-color: rgb(0, 122, 255) !important;
		border-color: rgb(0, 122, 255) !important;
	}

	.box {
		/deep/.cu-form-group {
			padding: unset;

			.title {
				text-align: justify;
				padding-right: unset;
				font-size: 15px;
				position: relative;
				height: 30px;
				line-height: 30px;
			}

			uni-input {
				width: 100%;
			}

			uni-picker::after {
				right: 0;
			}
		}
	}


	/deep/.align-center {
		width: 100%;
	}

	

	.formbox {
		padding: 15px;
		text-align: left;
		.h5 {
			text-align: left;
			box-sizing: border-box;
			font-size: 18px;
			margin-bottom: 25px;
			font-weight: bold;
			width: 100%;
		}
	}

	// 时间
	.leave_cont .ul {
		padding-left: 30rpx;
	}

	.leave_cont .ul .li {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #efefef;
	}

	.leave_cont .ul .li text {
		padding: 40rpx 0;
		font-size: 34rpx;
		font-family: '黑体';
	}

	.leave_cont .ul .li .flex1 {
		flex: 1;
		text-align: right;
		padding-right: 25rpx;
		color: #999999;
		font-size: 32rpx;
	}

	.date {
		height: 42rpx;
	}

	.leave_cont .ul .li uni-text {
		padding: 10px 0 !important;
	}

	.uni-label-pointer {
		margin-right: 10px;
	}

	// 时间
	.uni-btn-v {
		display: flex;
		margin-top: 20px;
		// position: fixed;
		bottom: 0;
		width: 100%;
		right: 0;

		uni-button {
			width: 46%;
			border-radius: 300px;
		}

		uni-button:after {
			border: unset;
		}
	}
	/deep/.uni-drawer{
		.uni-drawer__content{
			width: 80%!important;
		}
	} 
</style>
